<template>
  <div class="container">
    <header class="header">VIP会员</header>
    <div class="content">
      <div class="top">
        <span>名厨教学</span>
        <h3>秋冬进补吃牛肉</h3>
        <p>暖胃又暖身</p>
      </div>
      <ul>
        <h3>VIP最新推荐</h3>
        <iframe frameborder="0" style="width:1.5rem;height:1.2rem;margin-right:0.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
	  		<iframe frameborder="0" style="width:1.5rem;height:1.2rem" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
      </ul>
      <ul>
        <h3>VIP限时免费</h3>
        <iframe frameborder="0" style="width:1.5rem;height:1.2rem;margin-right:0.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
	  		<iframe frameborder="0" style="width:1.5rem;height:1.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
      </ul>
      <ul>
        <h3>VIP特邀名厨</h3>
        <iframe frameborder="0" style="width:1.5rem;height:1.4rem;margin-right:0.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
	  		<iframe frameborder="0" style="width:1.5rem;height:1.4rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
      </ul>
      <ul>
        <h4>名厨课：甜蜜粤式经典</h4>
        <iframe frameborder="0" style="width:1.5rem;height:1.2rem;margin-right:0.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
	  		<iframe frameborder="0" style="width:1.5rem;height:1.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
      </ul>
      <ul>
        <h4>名厨课：换个口味，高颜值</h4>
        <iframe frameborder="0" style="width:1.5rem;height:1.2rem;margin-right:0.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
	  		<iframe frameborder="0" style="width:1.5rem;height:1.2rem;" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/lib/reset.scss";

.container {
	@include rect(100%,100%);
	@include overflow(auto);
  .header {
		@include flexbox();
		@include justify-content();
		@include align-items();
  }
  .content {
		@include overflow(auto);
		@include flexbox();
    .top {
      @include rect(90%,.96rem);
      margin: 0 auto;
      background: url("https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=b818a7949aef76c6c4dff379fc7f969f/9358d109b3de9c828c9d8c3a6681800a18d8438e.jpg");
      background-size: (100%,.96rem);
      text-align: center;
      span {
        @include rect(.36rem,.12rem);
        @include font-size(.12rem);
        border: .01rem solid #cccccc;
        border-radius: 0.1rem;
        color: #cccccc;
      }
      h3 {
        @include font-size(.18rem);
        color: #ffffff;
        margin-top: .2rem;
      }
      p {
        color: #eeeeee;
      }
    }
    ul {
      padding: .3rem 0;
      @include rect(90%,2rem);
      margin: 0 auto;
      h4 {
        @include font-size(.22rem);
      }
    }
  }
}
</style>